<template>
  <div class="chart-container" ref="chart">
    <!-- 装饰元素 -->
    <div class="corner-decor corner-tl"></div>
    <div class="corner-decor corner-tr"></div>
    <div class="glow-effect"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, ref, watch, onUnmounted } from 'vue'
import { useResize } from '~/utils/resize'

export default {
  name: 'EnhancedYouthDetection',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const chart = ref(null)
    let myChart = null
    let highlightInterval = null

    const initChart = () => {
      if (!chart.value)  return

      myChart = echarts.init(chart.value)
      updateChart()
      // setupInteractions()
    }

    const setupInteractions = () => {
      // 自动高亮轮播
      startAutoHighlight()

      // 鼠标悬停时停止自动轮播
      myChart.on('mouseover',  () => {
        stopAutoHighlight()
      })

      myChart.on('mouseout',  () => {
        startAutoHighlight()
      })
    }

    const updateChart = () => {
      const option = {
        title: {
          text: props.title,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei',
            textShadow: '0 0 10px rgba(79, 216, 222, 0.5)'
          },
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13, 42, 67, 0.95)',
          borderColor: '#4fd8de',
          borderWidth: 1,
          padding: [10, 15],
          textStyle: {
            color: '#fff',
            fontSize: 14,
            lineHeight: 24
          },
          extraCssText: 'box-shadow: 0 0 20px rgba(79, 216, 222, 0.5);',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(79, 216, 222, 0.2)'
            },
            label: {
              backgroundColor: 'rgba(11, 93, 232, 0.8)'
            }
          },
          formatter: params => {
            const passData = params.find(p  => p.seriesName  === '合格')
            const failData = params.find(p  => p.seriesName  === '不合格')
            const total = passData.value  + failData.value
            const passRate = total > 0 ? ((passData.value  / total) * 100).toFixed(1) : 0

            return `
              <div style="font-size:16px;font-weight:bold;margin-bottom:8px;color:#4fd8de">${params[0].axisValue}</div>
              <div style="display:flex;align-items:center;margin:5px 0">
                <span style="display:inline-block;width:12px;height:12px;background:${passData.color};border-radius:2px;margin-right:8px"></span>
                <span style="flex:1">合格：</span>
                <strong style="color:#fff">${passData.value}</strong>
                <span style="width:60px;text-align:right;color:#4fd8de">${passRate}%</span>
              </div>
              <div style="display:flex;align-items:center;margin:5px 0">
                <span style="display:inline-block;width:12px;height:12px;background:${failData.color};border-radius:2px;margin-right:8px"></span>
                <span style="flex:1">不合格：</span>
                <strong style="color:#fff">${failData.value}</strong>
                <span style="width:60px;text-align:right;color:#f5222d">${((failData.value  / total) * 100).toFixed(1)}%</span>
              </div>
              <div style="margin-top:8px;border-top:1px dashed rgba(255,255,255,0.2);padding-top:8px">
                <span>总计：</span>
                <strong style="color:#fff">${total}</strong>
              </div>
            `
          }
        },
        legend: {
          data: ['合格', '不合格'],
          textStyle: {
            color: '#fff',
            fontSize: 14,
            rich: {
              value: {
                color: '#4fd8de',
                fontWeight: 'bold',
                padding: [0, 0, 0, 10]
              }
            }
          },
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          top: 40,
          right: 40,
          formatter: name => {
            const series = name === '合格' ?
                props.data.map(item  => item.pass)  :
                props.data.map(item  => item.fail)
            const total = series.reduce((a,  b) => a + b, 0)
            return `${name}  {value|${total}}`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true,
          top: 80
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: props.data.map(item  => item.month),
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.6)'
            }
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12,
            interval: 0,
            rotate: props.data.length  > 8 ? 30 : 0
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '合格',
            type: 'line',
            smooth: 0.5,
            showSymbol: false,
            data: props.data.map(item  => item.pass),
            symbol: 'circle',
            symbolSize: 12,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0,  0, 0, 1, [
                { offset: 0, color: '#4fd8de' },
                { offset: 1, color: '#0b5de8' }
              ])
            },
            lineStyle: {
              width: 4,
              shadowColor: 'rgba(79, 216, 222, 0.5)',
              shadowBlur: 15,
              shadowOffsetY: 10
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0,  0, 0, 1, [
                { offset: 0, color: 'rgba(79, 216, 222, 0.6)' },
                { offset: 1, color: 'rgba(79, 216, 222, 0.1)' }
              ])
            },
            emphasis: {
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2,
                shadowBlur: 20,
                shadowColor: 'rgba(79, 216, 222, 0.8)'
              },
              lineStyle: {
                width: 5
              }
            },
            animation: {
              duration: 2000,
              easing: 'elasticOut'
            }
          },
          {
            name: '不合格',
            type: 'line',
            smooth: 0.5,
            showSymbol: false,
            data: props.data.map(item  => item.fail),
            symbol: 'circle',
            symbolSize: 12,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0,  0, 0, 1, [
                { offset: 0, color: '#f57474' },
                { offset: 1, color: '#f5222d' }
              ])
            },
            lineStyle: {
              width: 4,
              shadowColor: 'rgba(245, 116, 116, 0.5)',
              shadowBlur: 15,
              shadowOffsetY: 10
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0,  0, 0, 1, [
                { offset: 0, color: 'rgba(245, 116, 116, 0.6)' },
                { offset: 1, color: 'rgba(245, 116, 116, 0.1)' }
              ])
            },
            emphasis: {
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 2,
                shadowBlur: 20,
                shadowColor: 'rgba(245, 116, 116, 0.8)'
              },
              lineStyle: {
                width: 5
              }
            },
            animation: {
              duration: 2000,
              easing: 'elasticOut',
              delay: 300
            }
          }
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 1500
      }

      myChart.setOption(option)
    }

    // 自动高亮轮播
    const startAutoHighlight = () => {
      if (!props.data  || props.data.length  === 0) return

      let currentIndex = 0
      highlightInterval = setInterval(() => {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: [0, 1]
        })

        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: [0, 1],
          dataIndex: currentIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })

        currentIndex = (currentIndex + 1) % props.data.length
      }, 3000)
    }

    const stopAutoHighlight = () => {
      if (highlightInterval) {
        clearInterval(highlightInterval)
        highlightInterval = null
      }
    }

    onMounted(() => {
      initChart()
      useResize(myChart)
    })

    watch(() => props.data,  () => {
      if (myChart) {
        updateChart()
        stopAutoHighlight()
        startAutoHighlight()
      }
    }, { deep: true })

    onUnmounted(() => {
      stopAutoHighlight()
    })

    return { chart }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  background: rgba(13, 42, 67, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(79, 216, 222, 0.2);
  position: relative;
  overflow: hidden;
}

/* 四角装饰元素 */
.corner-decor {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #4fd8de;
  border-style: solid;
  border-width: 0;
  opacity: 0.6;
}

.corner-tl {
  top: 10px;
  left: 10px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-radius: 6px 0 0 0;
}

.corner-tr {
  top: 10px;
  right: 10px;
  border-top-width: 2px;
  border-right-width: 2px;
  border-radius: 0 6px 0 0;
}

/* 发光效果 */
.glow-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 50px rgba(79, 216, 222, 0.15);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 4s infinite alternate;
}

@keyframes glowPulse {
  0% {
    box-shadow: inset 0 0 30px rgba(79, 216, 222, 0.1);
  }
  100% {
    box-shadow: inset 0 0 60px rgba(79, 216, 222, 0.3);
  }
}
</style>